<template>
  <div>
    <!-- 导航栏 -->
    <div class="nav">
      <router-link to="/discover">发现音乐</router-link>
      <!-- <router-link to="/my?name=jack&age=16">我的音乐</router-link> -->
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/follow/32/rose">关注</router-link>
      <button @click="$router.push('/discover')">跳转到发现</button>
      <button @click="fn1">跳转到我的</button>
      <button @click="fn2">跳转到发现--带params参数</button>
    </div>
    <!-- 路由出口 -- 1级路由出口 -->
    <router-view />
  </div>
</template>

<script>
export default {

  methods: {
    fn1 () {
      // this.$router.push('/my?name=andy&age=99')

      // 编程式导航里传参写法
      this.$router.push({
        // 跳转到my 
        // path: '/my', 
        name: 'my',
        query: {
          name: 'jack',
          age: 16,
          sex: '男',
          pet: {
            nickname: '旺财',
            age: 1
          }
        }
      })
    },

    fn2 () {

      // 通过name能做路由跳转，而且如果要携带params参数，那么必须要用name才能跳转
      // 用path路径能跳转，但是无法携带params参数
      // name既可以用在query参数，也可以用在params参数的跳转
      // 所以推荐要传参数的话用name
      this.$router.push({
        name: 'discover',
        params: {
          name: 'rose',
          age: 15,
            pet: {
            nickname: '旺财',
            age: 1
          }
        }
      })
    }
  }
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
.nav {
  height: 50px;
  background-color: #242424;

  display: flex;
  align-items: center;
}

.nav a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.nav a.router-link-active {
  color: #f00;
}
</style>